<template>
    <view class="laborUnion_outer">
        <view class="laborUnion_headerbox">
            <view class="laborUnion_header">
                <view class="laborUnion_header_title"><text>云豆公会</text></view>
                <view class="laborUnion_header_last_title"><text>高度自由转赠云豆</text></view>
            </view>
            <!-- <view class="laborUnion_header_card">
                <view class="laborUnion_header_card_left">
                    <view class="laborUnion_header_card_top">
                        <text>玩法说明</text>
                        <image src="@/static/laborUnion/next.png" />
                    </view>
                    <view class="laborUnion_header_card_down"><text>RULE</text></view>
                </view>
                <view class="laborUnion_header_card_right">
                    <view class="laborUnion_header_card_top">
                        <text>升级公会</text>
                        <image src="@/static/laborUnion/next.png" />
                    </view>
                    <view class="laborUnion_header_card_down"><text>PLAYER</text></view>
                </view>
            </view> -->
            <!-- <view class="laborUnion_content_title"><text>盟主排名</text></view> -->
        </view>
        <scroll-view :scroll-y="true" class="laborUnion_content" :style="{ height: rewardRecordListHeight + 'rpx' }"
            @scrolltolower="refreshList">
            <view class="laborUnion_content_item" v-for="item, index in guildPageList" :key="index">
                <view class="laborUnion_content_item_ranking">
                    <image src="@/static/laborUnion/first.png" v-if="index == 0" />
                    <image src="@/static/laborUnion/second.png" v-if="index == 1" />
                    <image src="@/static/laborUnion/third.png" v-if="index == 2" />
                </view>
                <view class="laborUnion_content_item_top">
                    <view class="laborUnion_content_item_top_left">
                        <view class="laborUnion_content_item_top_left_img"><u-avatar :src="item.avatar" shape="square"
                                size="86rpx"></u-avatar>
                        </view>
                        <view class="laborUnion_content_item_top_left_text">
                            <view class="laborUnion_content_item_top_left_text_username">
                                <text>{{ item.nickname }}</text>
                            </view>
                            <view class="laborUnion_content_item_top_left_text_alliancename">
                                <view class="allian">
                                    <text>ID：{{ item.userId }}</text>
                                </view>
                                <view class="star">
                                    <text>综合评分：</text>
                                    <image src="@/static/laborUnion/star.png" />
                                    <text>{{ item.comprehensiveScore ? item.comprehensiveScore : 0 }}分</text>
                                </view>
                            </view>

                        </view>
                    </view>
                    <!-- <view class="laborUnion_content_item_top_right">
                                    <text>加好友</text>
                                </view> -->
                </view>
                <view class="alliance_member_list_item_box_position_img">
                    <image src="@/static/laborUnion/one.png" v-if="item.positionId == 1" />
                    <image src="@/static/laborUnion/three.png" v-if="item.positionId == 2" />
                    <image src="@/static/laborUnion/two.png" v-if="item.positionId == 3" />
                    <text>{{ item.guildName }}</text>

                </view>
                <view class="laborUnion_content_item_center">
                    <view class="laborUnion_content_item_center_one">交易评分：{{ item.flowScore ? item.flowScore : 0
                        }}</view>
                    <view class="laborUnion_content_item_center_two">库存评分：{{
            item.balanceScore ? item.balanceScore : 0 }}</view>
                    <view class="laborUnion_content_item_center_three">服务评分：{{
            item.giveawayScore ? item.giveawayScore : 0 }}</view>
                </view>
                <view class="laborUnion_content_item_down">
                    <view class="laborUnion_content_item_down_left">
                        <text class="iconfont laborUnion_content_item_down_left_logo">&#xe600;</text>
                        <text class="text" id="wechat">{{ item.wechat }}</text>
                        <text class="iconfont copy" @click="theCopy(item.wechat, 0)">&#xe621;</text>
                    </view>
                    <view class="laborUnion_content_item_down_right">
                        <text class="iconfont laborUnion_content_item_down_right_logo">&#xe882;</text>
                        <text class="text" id="qq">{{ item.qq }}</text>
                        <text class="iconfont copy" @click="theCopy(item.qq, 1)">&#xe621;</text>
                    </view>
                </view>
            </view>
        </scroll-view>
        <!-- <u-notify message="复制成功" ref="uNotify"></u-notify> -->
    </view>
</template>

<script>
import { reqRecommend, reqGuildPage, reqGuildDetail, reqGuildMemberPh } from '@/api/laborUnion.js'
import './laborUnionIconFont/iconfont.css'
export default {
    data() {
        return {
            // 转增列表高度
            rewardRecordListHeight: 0,
            // 是否展示联盟信息弹出层
            isShowAllianceMember: false,
            // 推荐公会列表
            recommendList: [],
            // 公会分页列表
            guildPageList: [],
            pageNum: 1,
            // 公会详情列表
            guildDetail: {},
            shownotify: false
        }
    },
    mounted() {
        this.computedHeight();
    },
    onShow() {
        // this.getRecommend()
        this.pageNum = 1
        this.getGuildPage()
        this.openShowAllianceMember()
    },
    methods: {
        // 打开联盟成员列表
        openShowAllianceMember(guildId) {
            this.getGuildDetail(12)
        },
        // 推荐公会
        async getRecommend() {
            const result = await reqRecommend()
            if (result.code == 200) {
                this.recommendList = result.data
            } else {
                uni.showToast({
                    title: result.msg,
                    icon: 'error'
                });

            }
        },
        // 公会分页
        async getGuildPage(val) {
            const result = await reqGuildMemberPh({
                pageNum: this.pageNum,
                pageSize: 10
            })
            if (result.code == 200) {
                if (val == 1) {
                    this.guildPageList = this.guildPageList.concat(result.data.list)
                    this.guildPageListTotal = result.data.total
                    return
                }
                this.guildPageList = result.data.list
                this.guildPageListTotal = result.data.total
            } else {
                uni.showToast({
                    title: result.msg,
                    icon: 'error'
                });

            }
        },
        // 公会详情
        async getGuildDetail(guildId) {
            uni.showLoading({
                title: '联盟详情加载中...'
            });
            const result = await reqGuildDetail({ guildId: guildId })
            uni.hideLoading()
            if (result.code == 200) {
                this.guildDetail = result.data
                this.isShowAllianceMember = true

            } else {
                uni.showToast({
                    title: result.msg,
                    icon: 'error'
                });
            }
        },
        // 到底后刷新列表
        refreshList() {
            if (this.guildPageList.length >= this.guildPageListTotal) {
                uni.showToast({
                    title: "没有更多了",
                    icon: "error",
                });
            } else {
                this.pageNum++;
                this.getGuildPage(1);
            }
        },
        // 复制
        theCopy(text, type) {
            navigator.clipboard.writeText(text)
            switch (type) {
                case 0:
                    uni.showToast({
                        title: "微信号已复制",
                        icon: "success",
                    });
                    break;
                case 1:
                    uni.showToast({
                        title: "QQ号已复制",
                        icon: "success",
                    });
                    break;
            }

            // this.$refs.uNotify.show({
            //     top: 10,
            //     type: 'success',
            //     color: '#FFFFFF',
            //     bgColor: '#FF841E',
            //     message: '复制成功',
            //     duration: 1000,
            //     fontSize: 20,
            //     safeAreaInsetTop: true
            // })
        },

        // 联盟排名列表高度
        computedHeight() {
            uni.getSystemInfo({
                success: (res) => {
                    const screenHeight = res.windowHeight; // 屏幕高度，单位为px
                    this.rewardRecordListHeight = this.$pxToRpx(screenHeight) - 320;
                },
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.laborUnion_outer {
    width: 100vw;
    height: 100vh;
    background: #FFFAEF;

    .laborUnion_headerbox {
        height: 320rpx;

        .laborUnion_header {
            width: 100%;
            height: 306rpx;
            background-image: url('@/static/laborUnion/header.png');
            background-size: cover;

            .laborUnion_header_title {
                font-size: 62rpx;
                font-family: DreamHanSansSC, DreamHanSansSC;
                font-weight: 800;
                color: #FFFFFF;
                line-height: 74rpx;
                margin-left: 58rpx;
                padding-top: 74rpx;
            }

            .laborUnion_header_last_title {
                width: 246rpx;
                height: 43rpx;
                font-size: 31rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 43rpx;
                margin-left: 58rpx;
                margin-top: 10rpx;
            }
        }

        .laborUnion_header_card {
            display: flex;
            align-items: center;
            justify-content: center;
            column-gap: 20rpx;
            border-radius: 45rpx 45rpx 0rpx 0rpx;
            background: #FFFAEF;
            overflow: hidden;
            margin-top: -50rpx;
            padding-top: 20rpx;

            .laborUnion_header_card_left {
                width: 346rpx;
                height: 180rpx;
                background: url('@/static/laborUnion/cardLeft.png');
                background-size: cover;
            }

            .laborUnion_header_card_right {
                width: 346rpx;
                height: 180rpx;
                background-image: url('@/static/laborUnion/cardRight.png');
                background-size: cover;
            }

            .laborUnion_header_card_top {
                display: flex;
                align-items: center;
                margin-top: 22rpx;

                text {
                    font-size: 28rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #FFFFFF;
                    line-height: 34rpx;
                    margin-left: 32rpx;
                }

                image {
                    width: 30rpx;
                    height: 30rpx;
                    margin-left: 8rpx;
                }
            }

            .laborUnion_header_card_down {
                font-size: 23rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 32rpx;
                margin-top: 12rpx;

                text {
                    margin-left: 32rpx;
                }
            }
        }

        .laborUnion_content_title {
            margin-top: 44rpx;

            text {
                margin-left: 44rpx;
                font-size: 36rpx;
                font-family: DreamHanSansSC, DreamHanSansSC;
                font-weight: 600;
                color: #37322C;
            }
        }
    }

    .laborUnion_content {
        .laborUnion_content_item {
            width: 712rpx;
            height: 278rpx;
            background: #F5F0E5;
            border-radius: 38rpx;
            margin: 20rpx auto 32rpx;
            position: relative;



            .laborUnion_content_item_top {
                display: flex;
                padding-top: 26rpx;
                margin-left: 26rpx;
                justify-content: space-between;
                align-items: center;

                .laborUnion_content_item_top_left {
                    display: flex;

                    .laborUnion_content_item_top_left_text {
                        margin-left: 18rpx;
                        display: flex;
                        flex-direction: column;

                        // justify-content: space-between;
                        .laborUnion_content_item_top_left_text_username {
                            width: 560rpx;
                            font-size: 28rpx;
                            font-family: DreamHanSansSC, DreamHanSansSC;
                            font-weight: 600;
                            color: #37322C;
                            line-height: 34rpx;
                            white-space: nowrap;
                            /* 不换行 */
                            overflow: hidden;
                            /* 内容超过元素大小时隐藏 */
                            text-overflow: ellipsis;
                            /* 使用省略号表示被隐藏的内容 */
                        }

                        .laborUnion_content_item_top_left_text_alliancename {
                            display: flex;
                            align-items: center;
                            margin-top: 10rpx;

                            .allian {
                                display: flex;
                                align-items: center;
                            }

                            .star {
                                display: flex;
                                align-items: center;
                                margin-left: 32rpx;
                            }

                            text {
                                font-size: 23rpx;
                                font-family: DreamHanSansSC, DreamHanSansSC;
                                font-weight: normal;
                                color: #37322C;
                                line-height: 28rpx;
                                margin-left: 8rpx;
                            }

                            image {
                                width: 30rpx;
                                height: 30rpx;
                            }
                        }
                    }
                }

                .laborUnion_content_item_top_right {
                    width: 117rpx;
                    height: 72rpx;
                    background: linear-gradient(180deg, #5E5950 0%, #545047 100%);
                    border-radius: 25rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 26rpx;

                    text {
                        font-size: 28rpx;
                        font-family: DreamHanSansSC, DreamHanSansSC;
                        font-weight: 600;
                        color: #FFFAEF;
                        line-height: 34rpx;
                    }
                }

            }

            .alliance_member_list_item_box_position_img {
                display: flex;
                align-items: center;
                margin-left: 128rpx;

                text {
                    font-family: PingFang SC;
                    font-size: 28rpx;
                    font-weight: normal;
                    /* 正文色/正文辅助色 */
                    color: #767676;
                    margin-left: 10rpx;
                }

                image {
                    width: 30rpx;
                    height: 30rpx;
                }
            }

            .laborUnion_content_item_center {
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: PingFang SC;
                font-size: 23rpx;
                font-weight: normal;
                /* 正文色/正文辅助色 */
                color: #767676;
                margin-top: 20rpx;

                .laborUnion_content_item_center_one {
                    border-right: 2rpx solid #CECECE;
                    padding-right: 20rpx;
                }

                .laborUnion_content_item_center_two {
                    margin-left: 20rpx;
                    padding-right: 20rpx;
                    border-right: 2rpx solid #CECECE;

                }

                .laborUnion_content_item_center_three {
                    margin-left: 20rpx;
                    margin-right: 32rpx;
                }
            }

            .laborUnion_content_item_down {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20rpx;
                color: rgb(94, 89, 80);

                .text {
                    margin-left: 20rpx;
                }

                .copy {
                    margin-left: 20rpx;
                    color: rgb(94, 89, 80, 0.4);
                }

                .laborUnion_content_item_down_left {
                    margin-left: 20rpx;

                    .laborUnion_content_item_down_left_logo {
                        color: rgb(0, 128, 0, 0.6);
                    }
                }

                .laborUnion_content_item_down_right {
                    margin-right: 20rpx;

                    .laborUnion_content_item_down_right_logo {
                        color: rgba(0, 153, 255, 0.8);
                    }
                }
            }

            .laborUnion_content_item_ranking {
                position: absolute;
                width: 56rpx;
                height: 56rpx;
                z-index: 10;
                top: -12rpx;
                left: 8rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .alliance_member {
        width: 100vw;
        height: 1200rpx;
        background: #FFFAEF;
        border-radius: 45rpx 45rpx 0rpx 0rpx;

        .alliance_member_title {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 36rpx;
            font-family: DreamHanSansSC, DreamHanSansSC;
            font-weight: 600;
            color: #37322C;
            line-height: 43rpx;
            margin-top: 40rpx;
        }

        .alliance_member_last_title {
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 28rpx;
            font-family: DreamHanSansSC, DreamHanSansSC;
            font-weight: normal;
            color: #5A564D;
            line-height: 38rpx;
            margin-top: 26rpx;
        }

        .alliance_member_list {
            height: 1000rpx;
            margin-top: 32rpx;

            .laborUnion_content_item {
                width: 712rpx;
                height: 258rpx;
                background: #F5F0E5;
                border-radius: 38rpx;
                margin: 20rpx auto 32rpx;
                position: relative;


                .laborUnion_content_item_top {
                    display: flex;
                    padding-top: 26rpx;
                    margin-left: 26rpx;
                    justify-content: space-between;
                    align-items: center;

                    .laborUnion_content_item_top_left {
                        display: flex;

                        .laborUnion_content_item_top_left_text {
                            margin-left: 18rpx;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;

                            .laborUnion_content_item_top_left_text_username {
                                font-size: 28rpx;
                                font-family: DreamHanSansSC, DreamHanSansSC;
                                font-weight: 600;
                                color: #37322C;
                                line-height: 34rpx;
                            }

                            .laborUnion_content_item_top_left_text_alliancename {
                                display: flex;
                                align-items: center;

                                .allian {
                                    display: flex;
                                    align-items: center;
                                }

                                .star {
                                    display: flex;
                                    align-items: center;
                                    margin-left: 32rpx;
                                }

                                text {
                                    font-size: 23rpx;
                                    font-family: DreamHanSansSC, DreamHanSansSC;
                                    font-weight: normal;
                                    color: #37322C;
                                    line-height: 28rpx;
                                    margin-left: 8rpx;
                                }

                                image {
                                    width: 30rpx;
                                    height: 30rpx;
                                }
                            }
                        }
                    }

                    .laborUnion_content_item_top_right {
                        width: 117rpx;
                        height: 72rpx;
                        background: linear-gradient(180deg, #5E5950 0%, #545047 100%);
                        border-radius: 25rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 26rpx;

                        text {
                            font-size: 28rpx;
                            font-family: DreamHanSansSC, DreamHanSansSC;
                            font-weight: 600;
                            color: #FFFAEF;
                            line-height: 34rpx;
                        }
                    }

                }

                .laborUnion_content_item_center {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    font-family: PingFang SC;
                    font-size: 28rpx;
                    font-weight: normal;
                    /* 正文色/正文辅助色 */
                    color: #767676;
                    margin-top: 20rpx;

                    .laborUnion_content_item_center_one {
                        border-right: 2rpx solid #CECECE;
                        padding-right: 20rpx;
                    }

                    .laborUnion_content_item_center_two {
                        margin-left: 20rpx;
                        padding-right: 20rpx;
                        border-right: 2rpx solid #CECECE;

                    }

                    .laborUnion_content_item_center_three {
                        margin-left: 20rpx;
                        margin-right: 32rpx;
                    }
                }

                .laborUnion_content_item_down {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 20rpx;

                    .text {
                        margin-left: 20rpx;
                    }

                    .copy {
                        margin-left: 20rpx;
                        color: rgb(94, 89, 80, 0.4);
                    }

                    .laborUnion_content_item_down_left {
                        margin-left: 20rpx;

                        .laborUnion_content_item_down_left_logo {
                            color: rgb(0, 128, 0, 0.6);
                        }
                    }

                    .laborUnion_content_item_down_right {
                        margin-right: 20rpx;

                        .laborUnion_content_item_down_right_logo {
                            color: rgba(0, 153, 255, 0.8);
                        }
                    }
                }
            }
        }

        .alliance_member_list_item_box {
            .alliance_member_list_item_box_position {
                display: flex;
                align-items: center;

                .alliance_member_list_item_box_position_img {
                    width: 56rpx;
                    height: 56rpx;
                    margin-left: 32rpx;

                    image {
                        width: 100%;
                        height: 100%;
                    }
                }

                .alliance_member_list_item_box_position_name {
                    font-size: 36rpx;
                    font-family: DreamHanSansSC, DreamHanSansSC;
                    font-weight: 600;
                    color: #37322C;
                    line-height: 43rpx;
                }
            }

        }
    }
}
</style>